<template>
  <div class="user-center">
    <div class="user-box">
      <div class="user-left">
        <UserLeft></UserLeft>
      </div>
      <div class="user-right">
        <h1>完善项目信息<span> (*是必填项)</span></h1>
        <div class="user-info-box">
          <el-form
            ref="ruleForm"
            :rules="rules"
            label-position="right"
            label-width="150px"
            :model="ruleForm"
          >
            <el-form-item label="赛题方向：" prop="direction">
              <el-select
                v-model="ruleForm.direction"
                placeholder="请选择"
                @change="changeDirection"
              >
                <el-option
                  v-for="item in direction"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目名称：" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="是否已申请专利：" prop="isPatent">
              <el-radio v-model="ruleForm.isPatent" label="1">是</el-radio>
              <el-radio v-model="ruleForm.isPatent" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="是否参加线上展示：" prop="isOnline">
              <el-radio v-model="ruleForm.isOnline" label="1">是</el-radio>
              <el-radio v-model="ruleForm.isOnline" label="0">否</el-radio>
              <p class="user-title-tips">线上赛将直接使用企业简介、项目简介、项目展示图片进行展示，不用另做提交</p>
            </el-form-item>
            <el-form-item
              v-if="!showNumber"
              class="two-line"
              label="企业已有或研发中工业APP数量："
              prop="appNumber"
            >
              <el-input v-model="ruleForm.appNumber" clearable></el-input>
            </el-form-item>
            <el-form-item label="项目简介：" prop="describe">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                :autosize="{ minRows: 9, maxRows: 29}"
                v-model="ruleForm.describe"
                maxlength="1000"
                show-word-limit
              >
              </el-input>
              <p class="user-title-tips">简要阐述项目主要内容、技术架构、实现功能、应用情况和竞争优势等有关情况500-1000字，控制字数，具体介绍可在报名表中体现。</p>
            </el-form-item>
            <div class="submit-box">
              <el-button class="submit" @click="submit()" type="primary" :disabled="submitBtnDisable">提交</el-button>
          </div>
          </el-form>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserLeft from "./components/UserLeft";
import { mapGetters, mapActions } from "vuex";
const positiveIntegers = (rule, value, callback) => {
	  if (value != "" && !/^[1-9]\d*$/.test(value)) {
      callback(new Error("只能输入大于0的正整数哦"));
    }
    callback();
	};
export default {
  components: {
    UserLeft,
  },
  data() {
    return {
      ruleForm: {
        direction: "",
        name: "",
        isPatent: "",
        isOnline: "",
        appNumber: "",
        describe: "",
      },
      rules: {
        direction: [
          { required: true, message: "请选择赛题方向", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          { min: 1, max: 30, message: '项目名称长度在 1 到 30 个字符', trigger: 'blur' }
        ],
        isPatent: [{ required: true }],
        isOnline: [{ required: true }],
        appNumber: [{ required: false }, { validator: positiveIntegers, trigger: "blur" }],
        describe: [
          { required: true, message: "请填写项目简介", trigger: "blur" },
        ],
      },
      showNumber: false,
      submitBtnDisable: false,
    };
  },
  mounted() {
    this.getDirection();
    this.init();
  },
  methods: {
    ...mapActions(["getDirection", "projectSave", "getUserInfo", "uploadFile"]),
    init() {
      this.getUserInfo().then((res) => {
        this.ruleForm.direction = this.userProjectInfo.direction_id;
        this.ruleForm.appNumber = this.userProjectInfo.app_count;
        this.ruleForm.name = this.userProjectInfo.title;
        this.ruleForm.isPatent = this.userProjectInfo.is_patent + "";
        this.ruleForm.isOnline = this.userProjectInfo.is_online_events + "";
        this.ruleForm.describe = this.userProjectInfo.content;
        this.changeDirection(this.userProjectInfo.direction_id)
      });
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        console.log({valid})
        if (valid) {
          let data = {
            direction_id: this.ruleForm.direction,
            app_count: this.ruleForm.appNumber,
            title: this.ruleForm.name,
            is_patent: this.ruleForm.isPatent,
            is_online_events: this.ruleForm.isOnline,
            content: this.ruleForm.describe,
          };
          this.submitBtnDisable = true;
          this.projectSave(data).then((res) => {
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.getUserInfo();
            this.submitBtnDisable = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changeDirection(id) {
      this.direction.forEach((item) => {
        if (item.id == id) {
          if (item.type == 1) {
            this.showNumber = false
          } else {
            this.showNumber = true;
          }
        }
      });
    },
  },
  computed: {
    ...mapGetters(["direction", "userProjectInfo"]),
  },
};
</script>

<style scoped>
.user-info-box {
  padding-right: 290px;
}
.two-line >>> .el-form-item__label {
  line-height: 20px;
}
.width-80 >>> .el-form-item__label {
  padding-left: 40px;
  width: 95px;
}
.user-info-box >>> .el-select {
  width: 100%;
}
.show-box {
  width: 310px;
}
.el-textarea__inner{
    overflow: hidden !important;
 }
</style>
